<!--  -->
<template>
  <div class="myinfor">
    <div class="infor">
      <img
        src="../../assets/images/hoverpic.png"
        class="headpic"
      />
      <h1 class="name">{{name}}</h1>
      <div class="desc">234</div>
      <div class="detailinfor">
        <div class="title">详细信息</div>
        <div class="inforitem">
          <div class="mtitle">邮箱</div>
          <div class="des">465856025@qq.com</div>
        </div>
        <div class="inforitem">
          <div class="mtitle">手机号</div>
          <div class="des">13817392111</div>
        </div>
        <div class="inforitem">
          <div class="mtitle">个人描述</div>
          <div class="des">123123123</div>
        </div>
      </div>

      
    </div>
    <div class="tip">
      <TipComponent></TipComponent>
    </div>
  </div>
</template>

<script>
import TipComponent from "@/components/TipComponent";
import { getCookie } from '../../assets/js/common';
export default {
  data() {
    return {
      name
    };
  },

  components: { TipComponent },

  computed: {},

  mounted() {
    this.name = getCookie("username")
  },

  methods: {}
};
</script>
<style scoped lang="scss">
.myinfor {
  width: 100%;
  display: flex;
  .infor {
    width: 300px;
    height: 100%;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    .headpic {
      border-radius: 100%;
      width: 100px;
      height: 100px;
    }
    .desc {
      color: grey;
      font-size: 12px;
    }
    .detailinfor {
      margin-top: 30px;
      .title {
        width: 100%;
        border-bottom: 1px solid rgb(248, 248, 248);
        text-align: left;
        padding-bottom: 10px;
      }
      .inforitem {
        text-align: left;
        padding: 5px 0;
        margin-top: 10px;
        .mtitle {
          font-size: 12px;
          color: grey;
        }
        .des {
          font-size: 18px;
        }
      }
    }
  }
  .tip {
    flex: 1;
    text-align: left;
    padding: 0 20px;
  }
}
</style>